<template>
    <div class="">
        <div class="content">
            <div class="training-content coach-page" style="margin-top: 120px;">
                <div class="aboutus-header display-flex-row justify-content-between">
                    <div class="aboutus-header-left display-flex-row align-items-center">
                        <img src="/images/ball.png" alt="">
                        <div class="aboutus-title">
                            <div class="title">INSTITUTION<span>ENTRY</span></div>
                            <p>球员注册</p>
                        </div>
                    </div>
                    <div class="aboutus-crumb display-flex-row align-items-bottom">
                        当前位置：
                        <router-link to="/">首页></router-link>
                        <a>球员注册</a>
                    </div>
                </div>
                <div class="about-box">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="球员姓名" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请输入球员名称"></el-input>
                        </el-form-item>

                        <el-form-item label="照片" prop="imgsA">
                            <el-upload
                                    :action="imgupload"
                                    list-type="picture-card"
                                    :on-success="picChange"
                                    :on-remove="picRemove"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="ruleForm.dialogVisible1">
                                <img width="100%" :src="dialogIhomeImgs1" alt="">
                            </el-dialog>
                            <div>(仅支持JPG格式，图片仅支持5M大小)</div>
                        </el-form-item>

                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="ruleForm.age" placeholder="请输入年龄"></el-input>
                        </el-form-item>

                        <el-form-item label="在读学校" prop="school">
                            <el-input v-model="ruleForm.school" placeholder="请输入毕业院校"></el-input>
                        </el-form-item>

                        <el-form-item label="在读年级" prop="zd">
                            <el-select v-model="ruleForm.zd" placeholder="请选择">
                                <el-option
                                        v-for="item in classList"
                                        :key="item.dictName"
                                        :label="item.dictName"
                                        :value="item.dictNo">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="在读班级">
                            <el-input v-model="ruleForm.clas"></el-input>
                        </el-form-item>

                        <el-form-item label="申请机构" prop="nikename">
                            <el-select v-model="ruleForm.mechanismId" @change="getCoachList" placeholder="请选择">
                                <el-option
                                        v-for="(item, index) in Agency"
                                        :key="item.index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            <el-tooltip class="item" effect="dark" content="请联系平台工作人员" placement="right">
                                <span class="tagColor"> 找不到机构？</span>
                            </el-tooltip>
                        </el-form-item>

                        <el-form-item label="所属教练" prop="nikename">
                            <el-select placeholder="请选择" v-model="ruleForm.coachId">
                                <el-option
                                        v-for="(item, index) in Agency1"
                                        :key="item.index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                            <el-tooltip class="item" effect="dark" content="请联系平台工作人员" placement="right">
                                <span class="tagColor"> 找不到教练？</span>
                            </el-tooltip>
                        </el-form-item>

                        <el-form-item label="身份证号" prop="leaderNo">
                            <el-input maxlength="18" v-model="ruleForm.leaderNo"></el-input>
                        </el-form-item>


                        <el-form-item label="监护人姓名" prop="guardianName">
                            <el-input v-model="ruleForm.guardianName"></el-input>
                        </el-form-item>
                        <el-form-item label="监护人电话" prop="guardianPhone">
                            <el-input maxlength="11" v-model="ruleForm.guardianPhone "></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="证件号码" prop="leaderNo">
                            <el-input v-model="ruleForm.leaderNo"></el-input>
                        </el-form-item> -->
                        <el-form-item label="监护人微信" prop="guardianWeChatNo">
                            <el-input v-model="ruleForm.guardianWeChatNo"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="邮箱" prop="email">
                            <el-input v-model="ruleForm.email"></el-input>
                        </el-form-item> -->

                        <el-form-item label="联系地址" prop="addressInfo">
                            <v-distpicker @selected='selected'></v-distpicker>
                            <!-- <el-select v-model="ruleForm.value1" placeholder="请选择">
                                               <el-option
                                                   v-for="(item, index) in province"
                                                   :key="item.index"
                                                   :label="item.label"
                                                   :value="item.label">
                                               </el-option>
                                           </el-select>

                                           <el-select v-model="ruleForm.value2" placeholder="请选择">
                                               <el-option
                                                   v-for="(item, index) in city"
                                                   :key="item.index"
                                                   :label="item.label"
                                                   :value="item.label">
                                               </el-option>
                                           </el-select>

                             <el-select v-model="ruleForm.value3" placeholder="请选择">
                                               <el-option
                                                   v-for="(item, index) in area"
                                                   :key="item.index"
                                                   :label="item.label"
                                                   :value="item.label">
                                               </el-option>
                                   </el-select> -->
                            <el-input style="margin-top: 10px;" v-model="ruleForm.address"></el-input>
                        </el-form-item>

                        <el-form-item label="服装尺码">
                            <el-select v-model="ruleForm.fz" placeholder="请选择">
                                <el-option
                                        v-for="item in OptionFZCM"
                                        :key="item.dictName"
                                        :label="item.dictName"
                                        :value="item.dictNo">
                                </el-option>
                            </el-select>
                            <span style="margin-left: 10px">{{ruleForm.fz|filtersdata(OptionFZCM)}}</span>
                        </el-form-item>

                        <el-form-item label="鞋码" prop="shoeSize">
                            <el-input type="text" v-model="ruleForm.shoeSize"></el-input>
                        </el-form-item>

                        <el-form-item label="设置密码" prop="password">
                            <el-input type="password" v-model="ruleForm.password"></el-input>
                        </el-form-item>
                        <el-form-item label="重复密码" prop="password">
                            <el-input type='password' v-model="ruleForm.password1"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="valiCode">
                            <div style="display: flex;justify-content: center;align-items: center;width: 400px">
                                <el-input v-model="ruleForm.valiCode" class="codeInput"></el-input>
                                <el-button style="margin-left: 20px" class="btn-color-red" type="primary"
                                           :disabled="!isgetcode" @click="getVcode">
                                    {{tips_vcode}}
                                </el-button>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="btn-color-red" type="primary" @click="submitForm('ruleForm')">申请入驻
                            </el-button>
                            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, getTypeList} from 'vuex'
    import VDistpicker from 'v-distpicker'

    import {userAddQY} from "../../../api/api/reg.js"
    import {isNumber, Agency, province, city, area, fz, deepCopy} from '../../../utils/utils'
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    export default {
        components: {VDistpicker},
        data() {
            return {
                dialogIhomeImgs1: [],
                classList: [],
                Agency,
                Agency1: [],
                province,
                city,
                area,
                fz,
                isgetcode: true,
                OptionFZCM: [],
                imgupload: imgupload,
                tips_vcode: "发送验证码",
                password: "",
                ruleForm: {
                    value3: '',
                    //球员名称
                    name: '',
                    //照片
                    // dialogVisible1:false,
                    //年龄
                    age: '',
                    //在读学校
                    school: '',
                    imgs:[],
                    //在读年级
                    "nikename": "",
                    "password": "",
                },

                rules: {
                    name: [
                        {required: true, message: '请输入球员名称', trigger: 'blur'},
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                    ],
                    school: [
                        {required: true, message: '请输入毕业院校', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '长度在6个字符以上', trigger: 'blur'}
                    ],
                    guardianPhone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {min: 11, max: 11, message: '请输入符合格式的手机号码', trigger: 'blur'}
                    ],
                    shoeSize: [
                        {required: true, message: '请输入鞋码', trigger: 'blur'},

                    ],
                }
            }
        },
        mounted() {
            this.getMechanismList();
            this.getCoachList();
            this.getOptionFZCM()
            this.getOptionZDNJ()
        },
        methods: {
            ...mapActions('Login', [
                'addQY',
                'getList',
                "getSmS",
                "CoachList",
                "getTypeList"
            ]),
            getMath(phone) {
                var start = Math.random().toString(36).substr(-10)
                var sjc = Date.parse(new Date());
                console.log(start + phone + sjc);
                return start + phone + sjc
            },
            // 获取验证码
            getVcode() {
                let data = {
                    "phone": this.getMath(this.ruleForm.guardianPhone)
                }
                this.isgetcode = false;
                this.getSmS(data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: "发送成功",
                            duration: 5 * 1000
                        })
                        this.isgetcode = false;
                        var wait = 60;
                        // 验证码倒计时
                        this.timer = setInterval(() => {
                            if (wait == 0) {
                                this.tips_vcode = "发送验证码";
                                this.isgetcode = true;
                                wait = 60;
                                clearInterval(this.timer);
                            } else {
                                this.tips_vcode = wait + "s";
                                this.isgetcode = false;
                                wait--;
                            }
                        }, 1000);
                    } else {
                        this.isgetcode = true;
                    }
                });
            },
            getMechanismList() {
                let data = {
                    "coachId": 0,
                    "mechanismId": 0,
                    "pageNum": 0,
                    "pageSize": 0
                }
                this.getList(data).then(r => {
                    console.log(r);
                    const {code, data, data: {list}} = r;
                    if (code == 200) {

                        let Agency = [];
                        list.map(i => {
                            Agency.push({value: i.id, label: i.name})
                        })
                        this.Agency = Agency;
                        console.log(this.Agency)
                    }
                })
            },
            selectCoach() {
            },
            getOptionFZCM() {
                this.getTypeList({type: 'FZCM'}).then(r => {
                    console.log(r);
                    const {code, data, data: {list}} = r;
                    if (code == 200) {
                        this.OptionFZCM = list
                    }
                })
            },
            getOptionZDNJ() {
                this.getTypeList({type: 'ZDNJ'}).then(r => {
                    console.log(r);
                    const {code, data, data: {list}} = r;
                    if (code == 200) {
                        this.classList = list
                    }
                })
            },
            getCoachList() {
                console.log(11);
                let data = {
                    "mechanismId": this.ruleForm.mechanismId,
                    "name": "",
                    "pageNum": 0,
                    "pageSize": 0,
                    "type": 0
                }
                this.CoachList(data).then(r => {
                    console.log(r);
                    const {code, data, data: {list}} = r;
                    if (code == 200) {

                        let Agency = [];
                        list.map(i => {
                            Agency.push({value: i.id, label: i.name})
                        })
                        this.Agency1 = Agency;
                        console.log(this.Agency1)
                    }
                })
            },
            selected(data) {
                let city = data.province.value + ',' + data.city.value + ',' + data.area.value
                console.log(city);
                this.ruleForm.addressInfo = city;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.onSumbit()
                    } else {
                        return false;
                    }
                });
            },
            setData() {
                let params = deepCopy(this.ruleForm)
                params.age = Number(this.ruleForm.age)
                params.imgs = this.ruleForm.imgs.join(',') || ''
                return params
            },
            // setData () {
            // 	// const {value1, value2, value3 } = this.ruleForm
            // 	// if (value1 && value2 && value3) {
            // 	// 	this.ruleForm.addressInfo = `${value1},${value2},${value3}`
            // 	// }
            // 	this.ruleForm.age = Number(this.ruleForm.age)
            // },

            onSumbit() {
                var that=this;
                if (this.ruleForm.imgs.length==0) {
                    this.$message({
                        message: '请上传照片',
                        type: 'warning'
                    });
                    return
                }
                console.log(this.ruleForm.imgs);
                let params = this.setData()
                let form = new FormData()
                // form.append('params', this.ruleForm)

                this.addQY(params).then(res => {
                    console.log(res)
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '入驻成功',
                            type: 'success'
                        })
                        this.$router.push('/login/login')
                    }
                })
            },

            //照片
            picChange(Response, file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.ruleForm.imgs = imgs
            },

            picRemove(Response, file, fileList) {
                console.log(fileList);
                let imgs = [];
                fileList.map(r => {
                    imgs.push(r.response.data.path)
                })
                this.ruleForm.imgs = imgs;
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        filters: {
            filtersdata: function (data, list) {
                for (var i = 0; i < list.length; i++) {
                    if (data == list[i].dictNo) {
                        return list[i].remarks
                    }
                }
            }
        },
    }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
</style>
<style scoped>

    @import url("../css/D-coach-training.css");

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .tagColor {
        color: #409EFF;
    }
</style>
